<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>


</head>
<body>
<div class="layui-fluid">

    <div class="layui-card">
        <div class="layui-card-header">车次列表</div>
        <div class="layui-card-body">
            <table id="linelist" lay-filter="lineFilter"></table>
        </div>
    </div>

    <!--音乐上传对话框-->
    <div id="uploadDialog" style="display: none;padding: 20px">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>音乐上传</legend>
            <div class="layui-field-box">
                <div class="layui-col-md12">
                    <form class="layui-form layui-form-pane" lay-filter="formMusic" id="formMusic">
                        <!--表单控件项：文件上传（歌曲文件）-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">歌曲文件:</label>
                            <button class="layui-btn layui-btn-normal" type="button" id="btnMusic">
                                <i class="layui-icon layui-icon-upload"></i>
                                选择文件
                            </button>
                            <!--播放器隐藏控件：获取总播放时长用-->
                            <audio src="" id="player" style="display: none"></audio>
                            <!--表单提交时提交歌曲总播放时长-->
                            <input type="hidden" name="duration" id="duration"/>
                        </div>
                        <!--歌曲的专辑选择控件-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">歌曲专辑:</label>
                            <div class="layui-input-block">
                                <select name="aid" id="aid">
                                    <option value="0">匿名</option>
                                </select>
                            </div>
                        </div>
                        <!--表单控件项：歌曲名-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">歌曲名:</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" name="name" id="musicname" lay-verify="required"
                                       lay-verType="tips" lay-reqText="请输入歌曲名称">
                            </div>
                        </div>
                        <!--表单控件项：歌曲风格流派-->
                        <div class="layui-form-item">
                            <label class="layui-form-label">风格:</label>
                            <div class="layui-input-block">
                                <select name="style" id="style">
                                    <option value="流行">流行</option>
                                    <option value="摇滚">摇滚</option>
                                    <option value="民谣">民谣</option>
                                    <option value="Rap/Hip Hop">Rap/Hip Hop</option>
                                    <option value="pop">pop</option>
                                    <option value="电子">电子</option>
                                    <option value="轻音乐">轻音乐</option>
                                    <option value="爵士">爵士</option>
                                    <option value="R&B">R&B</option>
                                    <option value="乡村">乡村</option>
                                    <option value="中国风">中国风</option>
                                    <option value="说唱">说唱</option>
                                    <option value="古典">古典</option>
                                    <option value="世界音乐">世界音乐</option>
                                </select>
                            </div>
                        </div>
                        <!-- 歌词控件    -->
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">歌词:</label>
                            <div class="layui-input-block">
                                <textarea name="lrc" class="layui-textarea" placeholder="请填写歌词内容"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </fieldset>
    </div>
</div>
<!--专辑详情对话框-->
<!-- <div id="details" style="display: none;padding: 20px">
    <table class="layui-table" lay-skin="nob">
        <tr>
            <td rowspan="3">
                <img src="" id="ablumImg" height="96px" alt="">
            </td>
            <td colspan="2">
                <h2><span id="ablumname"></span></h2>
            </td>
        </tr>
        <tr>
            <td>歌手: <span id="singer"></span></td>
            <td>语种: <span id="language"></span></td>
        </tr>
        <tr>
            <td>唱片公司: <span id="company"></span></td>
            <td>发行时间: <span id="releasedate"></span></td>
        </tr>
    </table>
    
    <table id="ablumDetails"></table>
</div> -->
<!--用户信息对话框-->
<div id="userInfoDialog">
    <table class="layui-table">
        <tr>
            <td>车次</td>
            <td><span id="id"></span></td>
        </tr>
        <tr>
            <td>起始站</td>
            <td><span id="startingstation"></span></td>
        </tr>
        <tr>
            <td>终点站</td>
            <td><span id="destination"></span></td>
        </tr>
        <tr>
            <td>日期</td>
            <td><span id="date"></span></td>
        </tr>
        <tr>
            <td>发车时间</td>
            <td><span id="departuretime"></span></td>
        </tr>
        <tr>
            <td>到达时间</td>
            <td><span id="arrivaltime"></span></td>
        </tr>
        <tr>
            <td>票价</td>
            <td><span id="price"></span></td>
        </tr>
        <tr>
            <td>距离</td>
            <td><span id="distance"></span></td>
        </tr>
        <tr>
            <td>行驶时间</td>
            <td><span id="time"></span></td>
        </tr>
        <tr>
            <td>状态</td>
            <td><span id="status"></span></td>
        </tr>
        <tr>
            <td>剩余票数</td>
            <td><span id="ticketnumber"></span></td>
        </tr>
    </table>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        var form = layui.form;
        //加载jquery对象
        var $ = layui.jquery;
        //获取文件上传组件
        var upload = layui.upload;

        table.render({
            elem:'#linelist',                              //用于渲染数据的表格元素选择器
            url:'http://127.0.0.1:8080/line/list',         //服务端数据接口
            page:{//分页配置
                curr:1,
                limit:10,
                limits:[5,10,20,30]

            },                                       //开启分页
            cols:[[
                {type:'checkbox'},
                {title:'序号',type:'numbers'},
                {title:'ID',field:'id'},
                {title:'起始站',field:'startingstation'},
                {title:'终点站',field:'destination'},
                {title:'日期',field:'date',templet:'<div>{{ layui.util.toDateString(d.addtime,"yyyy年MM月dd日") }}</div>'},
                //{title:'发车时间',field:'departuretime'},
                //{title:'到达时间',field:'arrivaltime'},
                {title:'票价',field:'price'},
                //{title:'距离',field:'distance'},
                //{title:'行驶时间',field:'time'},
                {title:'车次状态',field:'status',templet:function(d){
                    if(d.status === 0){
                        return '<div class="layui-badge layui-bg-blue">正常</div>'
                    }
                    return '<div class="layui-badge layui-bg-red">禁用</div>'
                }},
                {title:'剩余票数',field:'ticketnumber'},
                { title: '操作', templet: '#rowTools', width: 300 },
                
            ]]
        })

        table.on('tool(lineFilter)', function (obj) {
            //获取被点击元素的lay-event值，通过该值确定哪个按钮被点击
            let e = obj.event
                switch (e) {
                    case 'details':
                    //详情查看
                    layer.open({
                        type:1,                                //弹层类型 1：页面层
                        content:$('#userInfoDialog'),         //弹层dom元素
                        closeBtn:2,                           //标题栏关闭图标样式  
                        shadeClose:true,
                        success:function(layero,index,that){  //弹层被成功打开后回调  
                            layero.find('#id').text(obj.data.id)
                            layero.find('#startingstation').text(obj.data.startingstation)
                            layero.find('#destination').text(obj.data.destination)
                            layero.find('#date').text(obj.data.date)
                            layero.find('#departuretime').text(obj.data.departuretime)
                            layero.find('#arrivaltime').text(obj.data.arrivaltime)
                            layero.find('#price').text(obj.data.price)
                            layero.find('#distance').text(obj.data.distance)
                            layero.find('#time').text(obj.data.time)
                            layero.find('#status').html(obj.data.status===0 ? '<div class="layui-badge layui-bg-blue">正常</div>' : '<div class="layui-badge layui-bg-red">禁用</div>')
                            layero.find('#ticketnumber').text(obj.data.ticketnumber)
                        },
                        btn:['关闭'],   //自定义按钮
                        btnAlign:'c',   //自定义按钮位置 l-左  c-中  r-右
                        btn1:function(){    //自定按钮事件
                            layer.closeAll()
                        }
                    })
                    break;
                case 'del':
                    //删除
                    layer.confirm('确认删除该趟车次吗?', { icon: 3 }, function () {
                        $.ajax({
                            url: `http://127.0.0.1:8080/line/del/${obj.data.id}`,
                            type: 'DELETE',
                            success: function (resp) {
                                if (resp.code === 0) {
                                    layer.msg(resp.msg)
                                    //删除dom结构，并更新缓存
                                    obj.del()
                                } else {
                                    layer.alert(resp.msg, { icon: 2 })
                                }
                            }
                        })
                    })
                    break;
                case 'updateStatus':
                    //緩存當前被點擊的按鈕對象
                    let btn = $(this)
                    //修改状态
                    layer.confirm('确认修改吗?',{ icon: 3 }, function () {
                        //获取需要修改的数据行id
                        let id = obj.data.id
                        //获取需要修改成为状态
                        let status = btn.data('status')
                        //将数据封装为一个js对象
                        let data = {
                            id: id,
                            status: status
                        }
                        //发送ajax请求
                        $.ajax({
                            url: 'http://127.0.0.1:8080/line/update',
                            type: 'PUT',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function (resp) {
                                if (resp.code === 0) {
                                    layer.msg(resp.msg)
                                    //重新加载表格数据
                                    table.reloadData('linelist', {
                                        scrollPos: 'fixed'  // 保持滚动条位置不变 
                                    })
                                } else {
                                    layer.alert(resp.msg, { icon: 2 })
                                }
                            }
                        })
                    })
                    break;
            }
        })

    })

</script>

<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-upload"></i>
            详情查看
        </button>
        {{# if(d.status === 0){ }}
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateStatus" data-status="1">
            <i class="layui-icon layui-icon-close-fill"></i>
            禁用
        </button>
        {{# }else{ }}
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateStatus" data-status="0">
            <i class="layui-icon layui-icon-ok-circle"></i>
            启用
        </button>
        {{# } }}
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>


</body>
</html>